<template>
    <div class="page">
        <!-- 返回按钮 -->
        <div class="back-btn" @click="goBack">
            <van-icon name="arrow-left" size="20" color="#333"/>
        </div>
        <p class="welcome">修改密码</p>
        <img src="@/assets/images/loginCat.png" class="Cat">
        <div class="modifyBK">
            <div class="modify_Content">
                <!-- 原密码 -->
                <div class="password-item">
                    <p class="title">原密码</p>
                    <input type="password" v-model="passwordInfo.oldPwd" placeholder="请输入原密码" />
                </div>
                <!-- 新密码 -->
                <div class="password-item">
                    <p class="title">新密码</p>
                    <input type="password" v-model="passwordInfo.newPwd" placeholder="请输入新密码" />
                </div>
                <!-- 确认密码 -->
                <div class="password-item">
                    <p class="title">确认密码</p>
                    <input type="password" v-model="passwordInfo.rePwd" placeholder="请再次输入新密码" />
                </div>

                <!-- 确认修改按钮 -->
                <div class="confirm" @click="handleModify">
                    <span>确认修改</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { modifyPassword } from "../api/index";  // 需要创建这个API

const router = useRouter();

const goBack = () => {
    router.back();
};

const passwordInfo = reactive({
    oldPwd: '',
    newPwd: '',
    rePwd: ''
})

const handleModify = async () => {
    // 密码正则：必须包含大小写字母和数字，长度8-16位
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;

    if (passwordInfo.oldPwd === '') {
        showToast('请输入原密码');
    } else if (passwordInfo.newPwd === '') {
        showToast('请输入新密码');
    } else if (!passwordRegex.test(passwordInfo.newPwd)) {
        showToast('新密码必须包含大小写字母和数字，长度在8到16个字符之间');
    } else if (passwordInfo.rePwd === '') {
        showToast('请确认新密码');
    } else if (passwordInfo.newPwd !== passwordInfo.rePwd) {
        showToast('两次输入的密码不一致');
    } else {
        try {
            const res = await modifyPassword(passwordInfo);
            if (res.data.code === 200) {
                showToast('修改成功');
                localStorage.removeItem('token');
                router.replace('/login');
            } else {
                showToast(res.data.message || '修改失败');
            }
        } catch (error) {
            console.error('修改密码错误:', error);
            if (error.response?.status === 401) {
                showToast('登录已过期，请重新登录');
                router.replace('/login');
            } else {
                showToast('修改密码失败');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-color: #8D9F5E;
    width: 100%;
    height: 100vh;
    position: relative;

    .welcome {
        font-size: 31px;
        position: absolute;
        top: 47.95px;
        left: 31.31px;
        color: #fff;
    }

    .back-btn {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 11;  // 增加 z-index 确保在最上层
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        
        &:active {
            background: rgba(245, 245, 245, 0.9);
        }
    }

    .Cat {
        position: absolute;
        left: 156.58px;
        top: 68.5px;
        width: 181.68px;
        height: 134.07px;
    }

    .modifyBK {
        position: absolute;
        top: 195.62px;
        background-color: rgba(104, 57, 49, 1);
        width: 100%;
        height: 20px;
        border-radius: 40px 40px 0 0;
    }

    .modify_Content {
        position: absolute;
        top: 3.56px;
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: calc(100vh - 195.62px);
        border-radius: 25px 25px 0 0;
        overflow-y: auto;

        .title {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 21.22px;
            color: rgba(141, 159, 94, 1);
        }

        .password-item {
            position: relative;
            margin: 20px;
            height: 100px;

            input {
                width: 335px;
                height: 48px;
                background: transparent;
                border: none;
                border-bottom: 1px solid rgba(0, 0, 0, 0.38);
                padding: 0 15px;
                margin-top: 8px;
                font-size: 14px;
                color: #333;
                outline: none;

                &::placeholder {
                    color: #999;
                }

                &:focus {
                    border-bottom: 2px solid #8D9F5E;
                    background: transparent;
                }
            }
        }

        .confirm {
            width: 335px;
            height: 48px;
            margin: 20px;
            background: rgba(141, 159, 94, 1);
            box-shadow: 0px 14px 17px rgba(141, 159, 94, 0.6);
            border-radius: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            span {
                color: #fff;
                font-size: 16px;
            }

            &:active {
                opacity: 0.8;
            }
        }
    }
}
</style>